import './MyTabbar.scss'
import React, { Component } from 'react';

class MyTabbar extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            arr:['店铺','分类','全部商品','购物车','个人中心']
        }
    }
    handleClick(index){
        this.setState({
            currentIndex:index
        },()=>{
            console.log(this.state.currentIndex);
        })
    }
    render() {
        return (
            <div className='tabbar'>
                    <div className="smlist">
                {
                    this.state.arr.map((item,index)=>{
                        return(
                            <div className={`tab ${this.state.currentIndex == index ? 'active':''}`} key={index} onClick={()=>{this.handleClick(index)}}>
                                {/* <img src=""/> */}
                                <span className="name">
                                    {item}
                                </span>
                            </div>
                        )
                    })
                }
                </div>
            </div>
        );
    }
}

export default MyTabbar;